<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- <ul @click="clickUl"> -->
        <!-- 2. self  只有自己触发 -->
        <ul @click.self="clickUl">
            <!-- 1. stop  阻止冒泡 -->
            <li @click.stop="clickLi">stop</li>
            <li @click="clickLi">click</li>
            <!-- 3. once  只绑定一次 -->
            <li @click.once="clickLi">once</li>
            <li>444</li>
            <li>555</li>
        </ul>

        <!-- 4. prevent  阻止默认行为 -->
        <a href="www.baidu.com" @click.prevent>百度</a>
    </div>
</body>
<script>
    // 事件修饰符 ：stop prevent self once
    let vm = new Vue({
        el: '#app',
        methods: {
            clickUl(evt) {
                console.log("ul");
            },
            clickLi(evt) {
                console.log('li');
                // 原生写法
                // evt.stopPropagation();
            }
        }
    });
</script>

</html>